<template>

  <el-container>
    <el-header id="header-box">
      <top-header></top-header>
    </el-header>
    <el-container>
      <el-aside id="left-menu-list-box" width="200px">
        <admin-menu></admin-menu>
      </el-aside>
      <el-main v-if="isLoggedIn">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  import AdminMenu from './AdminMenu'
  import TopHeader from "./TopHeader";

  export default {
    name: 'AdminIndex',
    components: {TopHeader, AdminMenu},
    data () {
      return {
        dialogVisible: false
      }
    },
    computed:{
      isLoggedIn(){
        return !!(this.$store.state.user && this.$store.state.user.userName)
      }
    },
    //动态设置侧边栏高度
    mounted() {
      let leftMenuBox = document.getElementById('left-menu-list-box');
      let headerBox = document.getElementById('header-box');
      let dy = window.innerHeight - headerBox.offsetHeight;
      if( leftMenuBox && headerBox){
        leftMenuBox.style.height = dy + 'px';
      }
      // 登录后拉取菜单
      this.fetchMenus();
    }
    ,methods:{
      fetchMenus(){
        const username = this.$store.state.user && this.$store.state.user.userName;
        if(!username){
          this.$store.commit('initAdminMenu', []);
          return;
        }
        this.$axios.get('/users/menus', { params: { username } }).then(resp => {
          if(resp && (resp.code === 200 || resp.success === true)){
            // resp.data 期望为菜单数组（树/扁平），这里直接设置
            this.$store.commit('initAdminMenu', resp.data || []);
          } else {
            this.$store.commit('initAdminMenu', []);
          }
        }).catch(() => {
          this.$store.commit('initAdminMenu', []);
        })
      }
    }
  }
</script>

<style scoped>

  #left-menu-list-box .el-menu{
    border-right: none;
  }

  .el-header{
    line-height: 46px;
    height: 46px !important;
    border-bottom: 1px solid #e6e6e6;
  }
  .el-aside{
    border-right: solid 1px #e6e6e6;
    line-height: 200px;
  }
</style>
